<template>
  <ex-dialog width="50%" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <div class="main" v-loading="loading" style="position: relative;">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="问题类型" :label-width="labelWidth" prop="questionTypeId">
          <el-select v-model="ruleForm.questionTypeId" placeholder="请选择问题分类">
            <el-option v-for="item in adTypeList" :key="item.id" :label="item.value" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" :label-width="labelWidth" prop="title">
          <el-input v-model="ruleForm.title" placeholder="请输入问题标题"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="labelWidth" prop="sort">
          <el-input type="number" v-model="ruleForm.sort" placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" :label-width="labelWidth">
          <el-switch v-model="ruleForm.isShow" active-value="1" inactive-value="0" active-text="显示" inactive-text="隐藏">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <WangEditor :value.sync="ruleForm.content" @change="useDetailChange" style="width:95%;"></WangEditor>
        </el-form-item>
      </el-form>
    </div>
    <div class="button_box">
      <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">保存提交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </ex-dialog>
</template>
<script>
  import Loading from "@/components/Loading/index";
  import WangEditor from '@/components/WangEditor'
  // api
  import {
    questionContentInfo,
    addQuestionContent,
    updateQuestionContent,
    questionTypeSelect
  } from "@/api/setting/syProblemConfiguration";
  export default {
    name: 'BeeTokenSystemH5ProblemConfigDialog',
    components: {
      Loading,
      WangEditor
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      return {
        title: '新建/编辑问题',
        dialogVisible: false, //导入失败弹窗
        loading: false,
        AgreeLoading: false, //按钮loading
        labelWidth: '100px',
        adTypeList: [],
        ruleForm: {
          questionTypeId: '', //问题类型
          title: '', //标题
          sort: 9999, //排序
          isShow: '1', //是否显示
          content: '', //问题内容
        },
        rules: {
          questionTypeId: [{
            required: true,
            message: "请选择问题类型",
            trigger: ['blur', 'change']
          }, ],
          title: [{
            required: true,
            message: "请输入标题",
            trigger: ['blur', 'change']
          }, ],
          sort: [{
            required: true,
            message: "请输入排序号",
            trigger: ['blur', 'change']
          }, ],
        },
      };
    },
    created() {
      this.getQuestionTypeSelect()
      if (this.id != '' && this.id != null) {
        this.getInfo()
      }
    },
    mounted() {

    },
    methods: {
      //取消
      handleClose() {
        this.$emit("update:visible", false);
      },
      // 查询问题分类下拉框
      async getQuestionTypeSelect() {
        var res = await questionTypeSelect()
        this.adTypeList = res.result
      },
      // 富文本框设置
      useDetailChange(e) {
        if (e != '') {
          // this.$refs.ruleForm.clearValidate(['commodityList.'+index+'.useDetail']);
        }
      },
      getInfo() { //获取信息详情
        this.loading = true
        questionContentInfo(this.id).then((res) => {
            console.log(res.result)
            this.loading = false
            let info = res.result
            this.ruleForm.title = info.title
            this.ruleForm.questionTypeId = info.questionTypeId
            this.ruleForm.content = info.content
            this.ruleForm.sort = info.sort
            this.ruleForm.isShow = String(info.isShow)

          })
          .finally(() => {
            this.loading = false;
          });
      },
      // 判断通知内容是否为空
      checkVal(str) {
        let num = 0,
          reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g;
        while (num < str.length && str != "") {
          num++;
          let k = str.match(reg);
          if (k) {
            str = str.replace(k[0], "");
          }
        }
        return str == "";
      },

      submitForm(formName) {
        // console.log(this.ruleForm.questionTypeId)
        //通知状态 1草稿 2已通知
        // if (this.ruleForm.questionTypeId == '') {
        //   this.$message.error('请选择问题类型');
        //   return
        // } else if (this.ruleForm.title == '') {
        //   this.$message.error('请输入问题标题');
        //   return
        // } else if (this.ruleForm.sort == '') {
        //   this.$message.error('排序号不能为空');
        //   return
        // } else if (this.checkVal(this.ruleForm.content)) {
        //   this.$message.error('请输入问题内容');
        //   return
        // }
        // if (this.id != '' && this.id != null) {
        //   this.editForm()
        // } else {
        //   this.addForm()
        // }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.checkVal(this.ruleForm.content)) {
              this.$message.error('请输入问题内容');
              return
            }
            if (this.id != '' && this.id != null) {
              this.editForm()
            } else {
              this.addForm()
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      addForm() {
        this.AgreeLoading = true
        var params = {
          ...this.ruleForm
        };
        addQuestionContent(params).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            setTimeout(() => {
              this.$emit('success')
              this.handleClose()
              this.AgreeLoading = false
            }, 1000);
          })
          .catch(() => {
            this.AgreeLoading = false;
          });
      },

      editForm(status) {
        this.AgreeLoading = true
        var params = {
          id: this.id,
          ...this.ruleForm
        };
        updateQuestionContent(params).then((res) => {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            setTimeout(() => {
              this.$emit('success')
              this.AgreeLoading = false
              this.handleClose()
            }, 1000);
          })
          .catch(() => {
            this.AgreeLoading = false;
          });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }

    .el-select,
    .el-input {
      width: 300px;
    }
  }

  .button_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }

  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  ::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
  }

</style>
